<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind绑定style</title>
    <style type="text/css">
        .static{
            width: 100px;
            height: 200px;
            display: block;
            background-color: green;
        }
        .active{
            border: 10px solid dodgerblue;
        }

        .error{
            background-color: red;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>
            v-bind绑定style
        </legend>
        <p>
            使用v-bind:style(即:style)可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法
        </p>
        <fieldset>
            <legend>使用对象语法绑定style</legend>
            <div id="app1">
                <!--css 属性名称使用驼峰命名（camelCase）或短横分隔命名（ kebab-case ）-->
                <div :style="{'color':fontColor,'fontSize':fontSize+'px'}">
                    app1→我是div
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>使用对象语法绑定style</legend>
            <p>大多数情况下,直接写一长串的样式不便于阅读和维护，所以一般写在data或computed里</p>
            <div id="app2">
                <!--css属性名称使用驼峰命名（camelCase）或短横分隔命名（ kebab-case ）-->
                <div :style="divStyle">
                    app2→我是div
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>使用数组语法绑定style</legend>
            <p>应用多个样式对象时，可以使用数组语法：:style="[styleA ,styleB]" </p>
            <div id="app3">
                <div :style="[styleA,styleB]">
                    app3→我是div
                </div>
            </div>
        </fieldset>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el:"#app1",
        data:{
            fontColor:"red",
            fontSize:18
        }
    });
    var app2 = new Vue({
        el:"#app2",
        data:{
            divStyle:{
                /*css属性名称使用驼峰命名（camelCase）*/
                color:"blue",
                fontSize:24+"px"
            }
        }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            styleA:{
                /*css属性名称使用驼峰命名（camelCase）*/
                color:"green"
            },
            styleB:{
                fontSize:28+"px"
            }
        }
    });
</script>